<template>
	<view class="add">
		<view class="item">
			<view class="title">内容</view>
			<textarea name="" id="" cols="30" rows="10" class="public textarea" v-model="node"></textarea>
		</view>
		<view class="item">
			<view class="title">类型</view>
			<uni-data-select v-model="types" :clear="false" field="appid as value, name as text" :localdata="cateList" @change="change"></uni-data-select>
		</view>
		<view class="item">
			<view class="title">上传图片</view>
			<view class="c_imgs">
				<view class="c_img">
					<image :src="item"  v-for="item in imgs"></image>
				</view>
				<image @tap="addimg" src="/static/shizi.jpg" role="img" mode="widthFix" class="upload"></image>
			</view>
		</view>
		<view class="item">
			<view class="title">上传视频</view>
			<view class="c_imgs">
				<view class="c_img">
					<video :src="videos" v-if="videos!==''"></video>
				</view>
				<image @tap="addvideo" v-if="videos==''" src="/static/shizi.jpg" role="img" mode="widthFix" class="upload"></image>
			</view>
		</view>
		<view class="tip">提示：没有权限不能发布素材！</view>
		<navigator url="/pages/source/list">
			<view class="already">已发布</view>
		</navigator>
		<button class="release" :starsShow="false" :headTitleShow="false" @click="release">发布</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				node: '',
				types: 0,
				imgs:[],
				videos:'',
				cateList:[]
			};
		},
		onLoad(){
			this.getCateList();
		},
		 methods: {
			 release(){
				 if(this.node==''){
					return this.$api.msg('请填写内容');
				 }
				 if(this.types==''){
					return this.$api.msg('请选择素材类型');
				 }
				 if(this.imgs.length==0&&this.videos==''){
					 return this.$api.msg('上传图片/视频');
				 }
				 this.$axios('Index/addMaterial', 'POST', 'sale',{
					 cateid: this.types,
					 content: this.node,
					 thumb: this.imgs,
					 video: this.videos
				 }).then(res => {
				 	if (res.data.code == 200) {
						this.node = '';
						this.imgs=[];
						this.videos='';
						this.types=0;
						this.$api.msg('发布成功');
				 	}
				 })
			 },
			 addvideo(){
				 var that = this;
				 var token = "";
				 const value = uni.getStorageSync('token');
				 if (value) {
				 	token = value
				 }
				 uni.chooseVideo({
				 	sourceType: ['album'], //从相册选择
				 	success: function(res) {
						uni.showLoading({
							title: '上传中,请稍后'
						});
				 		var path = res.tempFilePath;
				 		uni.uploadFile({
				 			url: that.$url.state.url.uploadvod,
				 			filePath: path,
				 			name: 'a',
				 			header: {
				 				token: token
				 			},
				 			formData: {
				 				'file': 'a'
				 			},
				 			success: upres => {
								uni.hideLoading()
				 				let data = JSON.parse(upres.data);
				 				if (data.code == 200) {
				 					that.videos=data.data.url;
				 				}
				 			}
				 		})
				 	}
				 });
			 },
			 addimg() {
			 	var that = this;
			 	var token = "";
			 	const value = uni.getStorageSync('token');
			 	if (value) {
			 		token = value
			 	}
			 	uni.chooseImage({
			 		count: 9, //默认9 指定可以选择几张图片
			 		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			 		sourceType: ['album'], //从相册选择
			 		success: function(res) {
						uni.showLoading({
							title: '上传中,请稍后'
						});
						res.tempFilePaths.forEach((image)=>{
							uni.uploadFile({
								url: that.$url.state.url.upload,
								filePath: image,
								name: 'a',
								header: {
									token: token
								},
								formData: {
									'file': 'a'
								},
								success: upres => {
									uni.hideLoading()
									let data = JSON.parse(upres.data);
									if (data.code == 200) {
										that.imgs.push(data.data.url);
									}
								}
							})
						})
			 		}
			 	});
			 },
			getCateList() {
			 	this.$axios('Index/saleCate', 'POST', 'sale').then(res => {
			 		if (res.data.code == 200) {
						const All = res.data.data;
						let myrange = []
						All.forEach((val, index) => {
							myrange.push({
						        value: val.id,   // 选项id
						        text: val.title   // 选项名称
						    })
						})
						this.cateList = myrange
			 		}
			 	})
			},
		    change(e) {
		      this.types = e;
		    },
		  },
	}
</script>

<style lang="scss" scoped>
	.add{
		padding: 15rpx 20rpx 200rpx;
		font-size: 32rpx;
		.item{
			.title{
				margin: 25rpx 0 15rpx;
				&::before{
					content: "";
					display: inline-block;
					width: 8rpx;
					height: 24rpx;
					border-radius: 20rpx;
					margin-right: 12rpx;
					background-color: $bg-color;
				}
			}
			.public,.uni-select{
				border: 1rpx solid #e5e5e5;
				border-radius: 8rpx;
				font-size: 28rpx;
				width: 100%;
				padding: 0 10rpx;
				height: 70rpx;
			}
			.textarea{
				height: 300rpx;
				padding-top: 10rpx;
			}
		}
		.release{
			background: $bg-color;
			position: fixed;
			bottom: 50rpx;
			left: 0;
			right: 0;
			margin: auto;
			width: 400rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: white;
			text-align: center;
		}
		.already{
			position: fixed;
			bottom: 60rpx;
			font-size: 26rpx;
			text-decoration: underline;
			color: #116aef;
		}
		.c_imgs {
			box-sizing: border-box;
			.c_img {
				display: flex;
				margin-top: 20rpx;
				image {
					width: 150rpx;
					height: 150rpx;
				}
			}
			.upload {
				width: 200rpx;
			}
		}
		.tip{
			position: fixed;
			bottom: 140rpx;
			color: red;
			font-size: 28rpx;
		}
	}
</style>
